<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<style>
    #selectPODiv .modal-dialog{
        width:1200px !important;
        margin: 80px auto;
        max-width: 1200px !important;
    }
    #selectPODiv .form-group select, #selectPODiv .form-group input {
        width: calc(100vw / 2 - 400px);
    }
    .btn-warning.btn-outline {
        color: #fff;
    }
    .btn-submit{
        background: #2c74fa;
        margin-left: 20px;
        border: none;
        color: #fff;
    }
    #selectPODiv .modal-dialog .modal-content{
        height:700px;
        overflow-y:auto;
    }
    div::-webkit-scrollbar {
        width: 8px;
    }
    div::-webkit-scrollbar-track {
        background-color:#fff;
        border-radius: 0 4px 4px 0;
    }
    div::-webkit-scrollbar-thumb {
        background-color:#fff;
        border-radius: 0 4px 4px 0;
    }
</style>
<div class="modal" id="selectPODiv" tabindex="-1" role="dialog" aria-hidden="true" style="width: auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title">供应商信息选择</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 20px; padding-top: 5px;">
                <jsp:include page="supplierSearch.jsp"></jsp:include>
                <div class="table-responsive">
                    <div class="col-sm-12 text-right" style="padding-right: 0px;">
                        <button id="searchButton" class="btn btn-default btn-sm" type="button" style="margin-bottom: 5px;"><i class="fa fa-search"></i>&nbsp;&nbsp;展开查询</button>
                    </div>
                    <table class="table table-striped table-hover table-bordered border-top">
                        <thead>
                            <tr>
                                <th width="5%"></th>
                                <th>所属公司</th>
                                <th>供应商名称</th>
                                <th>供应商类型</th>
                                <th>供应商电话</th>
                                <th>供应商地址</th>
                                <th>注册资本</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${requestScope.list}" var="data" varStatus="index">
                                <tr id="${"line".concat(index.count)}">
                                    <td><input type="checkbox" class="i-checks" onclick="checkSelected(${index.count})"></td>
                                    <td id="${"sId".concat(index.count)}" style="display: none">${data.vendorId}</td>
                                    <td id="${"sCompany".concat(index.count)}">${data.company}</td>
                                    <td id="${"sName".concat(index.count)}">${data.vendorName}</td>
                                    <td id="${"sType".concat(index.count)}">
                                        <c:choose>
                                            <c:when test="${data.vendorType=='01'}">服务类</c:when>
                                            <c:when test="${data.vendorType=='02'}">基建类</c:when>
                                            <c:when test="${data.vendorType=='03'}">供货类</c:when>
                                        </c:choose>
                                    </td>
                                    <td id="${"sTel".concat(index.count)}">${data.vendorTelephone}</td>
                                    <td id="${"sAddress".concat(index.count)}">${data.vendorAddress}</td>
                                    <td id="${"sRegisteCapital".concat(index.count)}">${data.registeCapital}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                        <tfoot>
                            <jsp:include page="../common/popPages.jsp"></jsp:include>
                        </tfoot>
                    </table>
                </div>
                <div class="col-md-12">
                    <div class="form-group row m-b-none">
                        <div class="col-sm-10 col-sm-offset-2 text-right">
                            <button type="button" class="btn btn-primary" onclick="add()">保存</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var selected = [];

    // 添加/移除选中数据
    function checkSelected(id) {
        let index = selected.indexOf(id);
        if (index != -1) {
            selected.splice(index, 1);
        } else {
            selected.push(id);
        }
    }

    // 添加选中数据
    function add() {
        let html = "";
        for (let i = 0; i < selected.length; i ++) {
            let id = $("#sId" + selected[i]).text();
            parent.supplierIds.push(id);
            let j = parent.supplierIds.length;
            html +=
                '<tr id="supplierLine' + j + '">' +
                    '<td id="supplierNo' + j + '">' + j + '</td>' +
                    '<td id="supplierId' + j + '" style="display: none">' + id + '</td>' +
                    '<td id="supplierCompany' + j + '">' + $("#sCompany" + selected[i]).text() + '</td>' +
                    '<td id="supplierName' + j + '">' + $("#sName" + selected[i]).text() + '</td>' +
                    '<td id="supplierType' + j + '">' + $("#sType" + selected[i]).text().trim() + '</td>' +
                    '<td id="supplierTel' + j + '">' + $("#sTel" + selected[i]).text() + '</td>' +
                    '<td id="supplierAddress' + j + '">' + $("#sAddress" + selected[i]).text() + '</td>' +
                    '<td id="supplierRegisteCapital' + j + '">' + $("#sRegisteCapital" + selected[i]).text() + '</td>' +
                    '<td id="supplierOperation' + j + '" class="attachment">' +
                        '<button id="supplierdel' + j + '" type="button" onclick="delSupplier(' + j + ')">删除</button>' +
                    '</td>' +
                '</tr>';
        }
        parent.appendHtml("supplierBody", "supplierNothing", html);
        $('#selectPODiv').modal('hide');
    }

    // 显示收起查询页
    $("#searchButton").click(function(){
        if($("#searchDiv").css("display") == "none"){
            $("#searchDiv").show();
            $("#searchButton").html('关闭查询');
        }else{
            $("#searchDiv").hide();
            $("#searchButton").html('展开查询');
        }
    });

    //跳转页面
    function gotoPage(page){
        let data = {};
        data.page = page;
        data.vendorName = $("#vendorName").val();
        data.vendorType = $("#vendorType").val();
        data.company = $("#company").val();
        data.isBlacklist = "0";
        data.status = "Y";
        data.approveStatus = "APPROVE";
        data.notIn = parent.supplierIds;
        var pageNumber = ${requestScope.pages.pageNumber};
        var currentPage = ${requestScope.pages.page};
        //首页和尾页无需跳转
        if((currentPage==1&&page==1)||(currentPage==pageNumber&&page==pageNumber)){

        }else{
            showSupplier(data);
        }
    }
</script>